<template>
	<!-- 支付密码组件 -->
	<view class="model-keywrod-pay" v-if="modelState">
		<view class="wrap-pay">
			<view class="title">
				<image src="../../static/close.png" mode="" @click="handleClose"></image>
				<text>请输入交易密码</text>
			</view>
			<text class="unit" v-if="props">{{props.amount && '交易金额'}}</text>
			<text class="price" v-if="props">{{props.amount}}</text>
			<view class="content">
				<view class="password">
					<view v-for="(item,index) in 6" :key="index">
	
						<text v-if="password[index]||password[index]==0"></text>
					</view>
	
				</view>
			</view>
			<view class="key-word">
				<text v-for="(item,index) in key" @touchstart="handleKey(item)" :key="index">{{item}}</text>
				<image src="/static/del.png" mode="" @touchstart="handleDel"></image>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps(['amount'])
	console.log(props)
	const modelState = ref(false)
	const key = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
	const password = ref([])
	const lockState = ref(true)
	const emit = defineEmits(['bindPassWord'])
	const handleClose = ()=>{
		modelState.value = false
	}
	const handleKey = (item)=>{
		if (!lockState.value) return false;
		
		password.value.push(item)
		
		if (password.value.length >= 6) {
			lockState.value= false
			let pass = ""
			password.value.map(item => pass += item)
			
			
			emit('bindPassWord',pass)
			
			modelState.value = false
		}
		
	}
	const handleDel =()=> {
		password.value.splice(password.value.length - 1, 1)
		if (password.value.length < 6) {
			lockState.value = true
		}
	
	}
	const show = ()=>{
		password.value = []
		lockState.value = true
		modelState.value = true
	}
	defineExpose({
		show
	})
</script>

<style lang="scss" scoped>
	.model-keywrod-pay {
			position: fixed;
			height: 100vh;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			z-index: 99;
			.wrap-pay {
				width: 100%;
				// height: 1292rpx;
				background: #FFFFFF;
				
				border-radius: 15rpx 15rpx 0px 0px;
				position: absolute;
				left: 0;
				bottom: 0;
				
				.title {
					display: flex;
					align-items: center;
					margin: 30rpx 0 0 40rpx;
	
					image {
						width: 48rpx;
						height: 48rpx;
						display: block;
					}
	
					text {
						display: block;
						margin-left: 20rpx;
						color: #181B29;
						font-size: 32rpx;
					}
				}
	
				.unit {
					display: block;
					margin-top: 80rpx;
					text-align: center;
					color: #181B29;
					font-size: 32rpx;
					font-weight: 500;
				}
	
				.price {
					color: #181B29;
					font-size: 72rpx;
					margin-top: 10rpx;
					text-align: center;
					display: block;
					font-weight: bold;
					border: none;
				}
	
				.content {
					height: 394rpx;
					border-top: 1rpx solid #F2F3F7;
					margin-top: 80rpx;
	
					.item {
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 30rpx;
	
						>view {
							text:nth-of-type(1) {
								color: #181B29;
								font-size: 28rpx;
								display: block;
							}
	
							text:nth-of-type(2) {
								color: #A3A6B3;
								font-size: 24rpx;
								display: block;
								margin-top: 4rpx;
							}
						}
	
						>text {
							color: #181B29;
							font-size: 28rpx;
							display: block;
						}
					}
				}
	
				.password {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 578rpx;
					margin: 40rpx auto 80rpx;
	
					view {
						display: flex;
						width: 88rpx;
						height: 88rpx;
						background: #F2F3F7;
						border-radius: 10rpx;
						justify-content: center;
						align-items: center;
	
						text {
							display: block;
	
							width: 16rpx;
							height: 16rpx;
							background: #181B29;
							border-radius: 50%;
						}
					}
	
				}
	
				.key-word {
					height: 402rpx;
					background: rgba(206, 209, 215, 0.9);
					backdrop-filter: blur(20px);
					display: flex;
					flex-wrap: wrap;
					padding: 12rpx;
					// margin-right: -14rpx;+
					justify-content: center;
					padding-bottom: 122rpx;
					position: relative;
					width: 750rpx;
					margin-left: -6rpx;
					// min-width: 382px;
					// background:red ;
					// align-items: flex-start;
					text {
						display: block;
						width: 230rpx;
						height: 92rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						color: #000;
						font-size: 50rpx;
						text-align: center;
						line-height: 92rpx;
						margin-right: 14rpx;
						margin-bottom: 14rpx;
						
					}
	
					image {
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						right: 12.5%;
						bottom: 112rpx;
					}
				}
			}
		}
	
</style>